/*
	34 Responsive Grid System
	Multi-state, responsive CSS grid system

	Developer	: Kemal Yılmaz
	URL			: http://34grid.com
	Contact		: http://kemalyilmaz.com
				: http://twitter.com/xkema
				: http://www.facebook.com/pages/34Grid/401562963236958
	Version		: 1.0

	LICENSED UNDER Creative Commons Attribution 3.0 Unported License.
*/



/* 
	Reset styles.
	============================================================ CONTAINER ====
*/
/* I didn't add any reset styles, use your own */



/* 
	Main width-controller for your content. think ".container"
	class as a holder for ".row" classes for a basic layout.
	Default centered with margin 0 auto; style.
	============================================================ CONTAINER ====
*/
.container { margin: 0 auto; }



/* 
	Main grouping blocks. You can dump "n*100%"" width content to a
	single ".row". (with the little help of .skip-float and manual 
	.user-float classes)
	================================================================== ROW ====
*/
.row { /*width: 100%;*/ }



/* 
	A basic transitions for immediate childs of ".row" classes. I added 
	transitions assuming your html layout keeps "col_*"" elements right 
	after ".row" classes. (col_*'s are immediate childs of .row's) 
	Delete this block to get rid of transitions.
	(transitions are incompatible with some browsers. 
	("some browsers" usually refers to internet explorer :)
	====================================================== ROW TRANSITIONS ====
*/
.row > * {
	-webkit-transition	: all 400ms ease-out;
	-moz-transition		: all 400ms ease-out;
	-o-transition		: all 400ms ease-out;
	-ms-transition		: all 400ms ease-out;
	transition			: all 400ms ease-out;	
}



/* 
	Auto clearfix for all rows. Borrowed from HTML5BOILERPLATE.
	====================================================== ROW TRANSITIONS ====
*/
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }
.row { 
    *zoom: 1;
    margin-left: -1%;
    margin-right: -1%;
}



/* 
	Column (col_*) and complement (col_*c) classes.
	.col_0 class is not a must but i added it to
	keep things organized. You can use it for 
	marginless 100% widths.
	================================================ COLUMNS & COMPLEMENTS ====
*/

/* columns & complements (autogenerated styles) */
.col_0 {
	width: 100%;
	margin-bottom: 5px;
	display: block;
}

.col_1,
.col_2,
.col_3, .col_3c,
.col_4, .col_4c,
.col_5, .col_5c,
.col_6, .col_6c,
.col_7, .col_7c,
.col_8, .col_8c,
.col_9, .col_9c,
.col_10, .col_10c,
.col_11, .col_11c,
.col_12, .col_12c,
.col_13, .col_13c,
.col_14, .col_14c,
.col_15, .col_15c,
.col_16, .col_16c {
	padding-left    : 1.00%;
	padding-right	: 1.00%;
	margin-bottom	: 5px;
	float		: left;
	display		: block;
}

/* columns (autogenerated styles) */
.col_1 { width: 98%; }
.col_2 { width: 48%; }
.col_3 { width: 31.3333333334%; }
.col_4 { width: 23%; }
.col_5 { width: 18%; }
.col_6 { width: 14.6666666667%; }
.col_7 { width: 12.2857142857%; }
.col_8 { width: 10.5%; }
.col_9 { width: 9.11111111112%; }
.col_10 { width: 8%; }
.col_11 { width: 7.09090909091%; }
.col_12 { width: 6.33333333334%; }
.col_13 { width: 5.69230769231%; }
.col_14 { width: 5.14285714286%; }
.col_15 { width: 4.66666666667%; }
.col_16 { width: 4.25%; }

/* complements (autogenerated styles) */
.col_3c { width: 64.6666666666%; }
.col_4c { width: 73%; }
.col_5c { width: 78%; }
.col_6c { width: 81.3333333333%; }
.col_7c { width: 83.7142857143%; }
.col_8c { width: 85.5%; }
.col_9c { width: 86.8888888889%; }
.col_10c { width: 88%; }
.col_11c { width: 88.9090909091%; }
.col_12c { width: 89.6666666667%; }
.col_13c { width: 90.3076923077%; }
.col_14c { width: 90.8571428571%; }
.col_15c { width: 91.3333333333%; }
.col_16c { width: 91.75%; }



/* 
	100% width auto control for "img", "object" and
	"embed" controls.
	============================================ IMAGE FULL WIDTH CONTROLS ====
*/
img, object, embed { max-width: 100%; }
img { height: auto; }
figure img { max-width: 100%; }



/* 
	Use ".skip-float" class to start from brand new lines.
	Clears left of current 100% group for new 100% 
	lines in same ".row" group.
	@see webpage for details
	=============================================== FLOATING PROBLEM FIXER ====
*/
.skip-float { clear: left; }



/*	
	CSS hack for responsive videos.
	@see http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
	@see http://webdesignerwall.com/tutorials/css-elastic-videos
	========================================================= VIDEO HOLDER ====
*/
.video-holder {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	display: block;
}

.video-holder iframe, .video-holder object, .video-holder embed {
	position: absolute;	top: 0;	left: 0; width: 100%; height: 100%;
}